<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>XMLHttpRequest上传文件</title>
		<script type="text/javascript" src="jquery-1.11.3.js"></script>
</head>
<body>
	
	<input id="file" type="file" value="" >
	<br />
	<img src="" id="imgPreview" height="200" width="300" alt="Image preview..." />
	
	<div id="dome">
		
	</div>
</body>

<script type="text/javascript">
	
	//通过DataURL创建img对象
	//把img置入canvas
	//修改分辨率和质量
	//返回以DataURL为参数的回调函数
	
  var eleFile = document.querySelector('#file');
// 压缩图片需要的一些元素和对象
var reader = new FileReader(), img = new Image();

// 选择的文件对象
var file = null;

// 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

// base64地址图片加载完毕后
img.onload = function () {
    // 图片原始尺寸
    var originWidth = this.width;
    var originHeight = this.height;
		
    // 最大尺寸限制
    var maxWidth = 600, maxHeight = 800;
    // 目标尺寸
    var targetWidth = originWidth, targetHeight = originHeight;
    // 图片尺寸超过400x400的限制
    if (originWidth > maxWidth || originHeight > maxHeight) {
        if (originWidth / originHeight > maxWidth / maxHeight) {
            // 更宽，按照宽度限定尺寸
            targetWidth = maxWidth;
            targetHeight = Math.round(maxWidth * (originHeight / originWidth));
        } else {
            targetHeight = maxHeight;
            targetWidth = Math.round(maxHeight * (originWidth / originHeight));
        }
    }
        
    // canvas对图片进行缩放
    canvas.width = targetWidth;
    canvas.height = targetHeight;
    // 清除画布
    context.clearRect(0, 0, targetWidth, targetHeight);
    // 图片压缩
    context.drawImage(img, 0, 0, targetWidth, targetHeight);
    // canvas转为blob并上传
		
		
		var dataUrl = canvas.toDataURL('image/jpeg', 0.8);
		var preview = document.querySelector('img');
		preview.src = dataUrl;
		// 图片展示
		preview.style.display = 'block';
		
		
		$.ajax({
			 type: "POST",
			 url: "upload.php",
			 data: "imgdata="+ dataUrl,
			 success: function(msg){
				 //alert( "Data Saved: " + msg );
					alert(5566);
			 }
		});
		
};

// 文件base64化，以便获知图片原始尺寸
reader.onload = function(e) {
    img.src = e.target.result;
};
eleFile.addEventListener('change', function (event) {
    file = event.target.files[0];
    // 选择的文件是图片
    if (file.type.indexOf("image") == 0) {
        reader.readAsDataURL(file);    
    }
});
    </script>

</html>